import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import Button from '@kuiper-components/button';
import Dialog from '@kuiper-components/dialog';
import { datetime } from '../../../../../common/formatter';

import s from './style.module.css';

function Detail({ className, detail, item }) {
	const [visible, setVisible] = React.useState(false);
	return (
		<>
			<Button
				className={cn(className, s.detail)}
				link
				primary
				onClick={() => setVisible(true)}
			>
				查看详情
			</Button>
			<Dialog
				title="漏洞详情"
				visible={visible}
				style={{ marginTop: '10vh' }}
				onClose={() => setVisible(false)}
			>
				<div className={s.content}>
					<p>{detail.vuln_name}</p>
					<div className={s.nameBox}>
						<div className={s.left}>
							<span>发布时间：{datetime(detail.created_at) || '暂无'}</span>
							<span>风险等级：{detail.level}</span>
							{detail.cve[0] && <span>CVE-ID：{detail.cve[0] || '暂无'}</span>}
						</div>
						<div className={s.right}>
							<span>更新时间：{datetime(detail.updated_at) || '暂无'}</span>
							{detail.cnnvd[0] && <span>CNNVD-ID：{detail.cnnvd[0]}</span>}
							<span>OWASP TOP10 漏洞描述：{detail.owasp[0] || '暂无'}</span>
						</div>
					</div>
					<div style={{ maxHeight: '45vh', overflow: 'auto' }}>
						<p className={s.titleP}>漏洞影响：</p>
						<span className={s.contentSpan}>{detail.impact || '暂无'}</span>
						<p className={s.titleP}>漏洞概述：</p>
						<span className={s.contentSpan}>
							{detail.description || '暂无'}
						</span>
						{detail.zoomeye_count !== 0 ? (
							<p className={s.titleP}>影响范围：</p>
						) : (
							''
						)}
						{detail.zoomeye_count !== 0 ? (
							<span className={s.contentSpan}>
								根据ZoomEye网络空间搜索引擎关键字 <b>{detail.zoomeye_dork}</b>{' '}
								对潜在可能目标进行搜索，共得到 {detail.zoomeye_count}{' '}
								条IP历史记录。
							</span>
						) : (
							''
						)}
						<p className={s.titleP}>建议解决方案：</p>
						{detail.recommendation
							? detail.recommendation
									.replace(/\<br\/\>/g, '<br>')
									.split('<br>')
									.map((e, i) => {
										return (
											<span
												style={
													e.match(/&nbsp;/g)?.length > 0
														? {
																textIndent: `${
																	e.match(/&nbsp;/g).length / 2
																}rem`,
																display: 'block',
														  }
														: { display: 'block' }
												}
												className={s.contentSpan}
												key={i}
											>
												{e.replace(/&nbsp;/g, '')}
											</span>
										);
									})
							: '暂无'}
						<p className={s.titleP}>参考链接：</p>
						<span className={s.contentSpan}>
							{detail.reference[0] || '暂无'}
						</span>
					</div>
					<div className={s.btn}>
						<Button primary onClick={() => setVisible(false)}>
							关闭
						</Button>
					</div>
				</div>
			</Dialog>
		</>
	);
}

Detail.propTypes = {
	className: PropTypes.string,
	detail: PropTypes.string,
	item: PropTypes.any,
};
Detail.defaultProps = {
	className: '',
};

export default Detail;
